<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 定义扫码结果的响应式变量
const scannedBarcode = ref('');

// 定义全局变量
let barCode = '';
let lastTime = 0;

// 监听扫码枪输入
const eventListenerScanCode = () => {
  const ClearBarCode = () => {
    barCode = '';
    lastTime = 0;
  };

  window.addEventListener('keypress', (e) => {
    // 排除输入框焦点，避免干扰用户正常输入
    const activeElement = document.activeElement;
    if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') return;

    const currCode = e.keyCode || e.which || e.charCode;
    const currTime = new Date().getTime();

    if (currCode === 13) {
      // 回车键处理（扫码枪通常以回车键结束输入）
      if (barCode.length >= 16) {
        const parts = barCode.split(/\s+/); // 按空格分割扫码内容
        const middleValue = parts[1]?.toLowerCase().replace(/^af/, '') || ''; // 提取中间部分并去除前缀
        if (middleValue) {
          scannedBarcode.value = middleValue; // 更新扫码结果
        } else {
          ElMessage.error('请扫描正确的二维码'); // 错误提示
        }
      }
      ClearBarCode(); // 清空缓存数据
    } else {
      // 非回车键处理（收集扫码内容）
      if (lastTime === 0 || currTime - lastTime <= 80) {
        barCode += String.fromCharCode(currCode); // 将字符码转换为字符串
        lastTime = currTime; // 更新最后输入时间
      } else {
        ClearBarCode(); // 超时清空数据
      }
    }
  });
};

// 在组件挂载时启动扫码枪监听
onMounted(() => {
  eventListenerScanCode();
});
</script>

<template>
  <div>
    <h3>扫码结果：</h3>
    <p>{{ scannedBarcode }}</p>
  </div>
</template>
